<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <base href="/">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-control" content="no-cache">
  <meta http-equiv="Cache" content="no-cache">
  <link rel="icon" href="data:;base64,=">
  <title>路由主页</title>
  </head>
  <style>
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{position:absolute;width:100%;height:100%;min-width:1366px;min-height:768px;background: linear-gradient(skyblue,khaki);}
  /* 定义滚动条宽度 */::-webkit-scrollbar {width:4px;height:4px;}
  /*定义滚动条  轨道背景色+圆角*/::-webkit-scrollbar-track {border-radius: 2px;background-color: #555;}
  /*定义滚动条  滑块背景色+圆角*/::-webkit-scrollbar-thumb {border-radius: 2px;background-color: #C3C4C3;}
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  #component{
     display:flex;
     justify-content:left;
     flex-wrap:wrap;
     position: relative;
     width:100%;
     height:100%;
  }
  .top{
    width:100%;
    height:60px;
    border:1px solid blue;
  }
  .left{
    width:300px;
    height:calc(100% - 60px);
    padding:10px 20px;
    border:1px solid red;
  }
  .right{
    width:calc(100% - 300px);
    height:calc(100% - 60px);
    border:1px solid #7419E5;
  }
  .list_l{
     display:flex;
     justify-content:left;
     align-items:center;
     width:100%;
     height:32px;
     padding:0 20px;
     margin-bottom:10px;
     background-color: azure;
     border-radius:4px;
     user-select: none;
  }
  .list_l:hover{
    color:red;
  }
  .list_l:active{
    color: brown;
  }
  .right{
     position: relative;
     overflow-y: auto;
     overflow-x: hidden;
  }
  .loading:empty::before{
       content:'';
       display:block;
       position:absolute;
       left:50%;
       top:50%;
       width:20%;
       height:20%;
       transform: translate(-50%,-50%);
       background-image:url(./images/loading.gif);
       background-repeat:no-repeat;
       background-size:contain;
       background-position:center;
       /* visibility:visible; */
  }
  </style>

<body>
   
   <div id="component">
        <!-- top -->
        <div class="top" e-id="top">

        </div>
        <!-- left -->
        <div class="left">
            <div class="list_l" e-for="leftList" e-attr="title=name" e-evt="onclick=leftListSelect(id)"> {{name}} </div>
        </div>
        <!-- right -->
        <div class="right loading" e-id="container_1">
         <!-- e-component="id='input_0';mapping=getMapping1(temp0);data=getCmtData()" -->

          
        </div>
      
   </div>

</body>
</html>
<script src="./utils_eng/eng-dev-tool.js"></script>
<script src="./utils_eng/eng3.0.js"></script>
<script src="./utils_eng/router.js"></script>
<script src="./index.js"></script>
<!-- <script type="module"> -->
<script>
 // nodemon --inspect-brk F:\0.项目\0.Gitee和开发区\私有开发\web-eng\bin\index.js 
 // node  F:\0.项目\0.Gitee和开发区\私有开发\web-eng\bin\index.js  
var router=new Router({
       mode:'history',      //hash || history
       data:{
            leftList:{
                 //公共配置
                 parentId:'container_1',
                 rule:'leftList',
                 cacheMode:'session',    //  local: localStorage , session : sessionStorage , none : no-cache 
                 components:[
                      {
                          id:'test_1',
                          path:'./pages/test1.html',
                          //  允许的 私有配置
                          //  cacheMode:'none',
                          config:{
                              $_css:`.app{border:3px solid #A665F7;}`,
                              //  $_data
                              //  ..custom data...
                          } 
                      }, 
                      {
                          id:'test_2',
                          path:'./pages/test2.html',
                      },
                  ]
          },
       },
       rules:{
            leftList:{
               // Required parameters
               type:'only-sleep',        // only:仅有自身 销毁其它同规则组件 (默认)   , only-sleep:隐藏其它组件 , only-coexist:显示id不同的组件, coexist:同时存在和显示  
               // Optional parameters
               interceptor:function(cfg,callBack){
                      // do something
                      callBack(true);
               }
            },
            only:{
               type:'only'
            }    
       },
       error:{
              id:'404',
              path:'./pages/404.html',
              delay:1000*2,
              destroy:'global',      //all : 路由管理的所有组件,  global : 所有路由的组件
            //parentId:'',
              targetId:'welcome',      // 延迟打开的组件 
       },
       default:{
              id:'welcome',
              path:'./pages/welcome.html',
              parentId:'container_1',
       },
});


var APP=new Eng({
     el:document.getElementById('component'),
     mapping:{
          xxxx_xx:{
              value:'head',
              查查:'head'
          }
     },
     data:{
         temp0:{
             value:'haha',
         },
         leftList:[
            {
                name:'测试1',
                id:'test_1'
            },
            {
                name:'测试2',
                id:'test_2'
            },
         ]
     },
     onCreated(){
          console.log('created');
          APP=this;
          router.setHost(this);
     },
     onInit(){
             console.log('init');
          // this.hashInit();
     },
     methods:{
          leftListSelect(id){
                router.setComponent({
                      id:id,
                      config:{
                         test:id,
                      },
                      callBack(state){  //success, fail
                          
                      }
                });
          },
          getMapping1(){
                  //  debugger
                  return {value:'value'}
          },
          getCmtData(){
              var d=this.$_data.temp0;
                  console.log(d);
                  // debugger
                  return d;
          }
     },
});  

/* window.addEventListener("popstate", function() {
     var d= history.state;
         console.log(d);
}); */

// history.pushState(data,'', 'url' );
// history.replaceState(stateObj, title[, url]);  // 修改当前最后一条  pushState 的相关值 
/* 
  
  清空history记录 
  history.replaceState(null, "", '');
     

*/
</script>